<template>
  <div ref="treeBox" @click="aaa = '2'">
    <div>
      <el-row>
        <el-col :span="11">
          <el-card class="box-card">
            <el-input
              class="select_input"
              placeholder="输入关键字进行过滤"
              v-model="filterText"
            ></el-input>
            <!-- <abbr title="添加分组">
            <el-button class="u-add-parent" type="primary" icon="el-icon-plus" circle></el-button>
          </abbr>
          <abbr title="删除选中">
            <el-button class="u-delect-all" type="danger" icon="el-icon-delete" circle></el-button>
            </abbr>-->
            <el-tree
              :data="treeData"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
            >
              <div
                class="custom-tree-node"
                @click="routerConfig(data)"
                slot-scope="{ node, data }"
              >
                <div class="z-inline">{{ node.label }}</div>
                <div class="z-inline">
                  <el-popover
                    ref="popoverUpdate"
                    trigger="click"
                    placement="right"
                    title="移动节点"
                    width="600"
                    content
                  >
                    <div>
                      <el-form
                        :model="ruleFormUpdate"
                        :rules="rulesMoveForm"
                        :ref="'moveDom' + node.id"
                        label-width="100px"
                        class="demo-ruleForm"
                      >
                        <el-form-item label="节点目录" prop="parent">
                          <el-popover
                            placement="right"
                            width="400"
                            trigger="hover"
                          >
                            <el-tree
                              :data="treeDataCopy"
                              @node-click="handleNodeClick"
                            ></el-tree>
                            <a slot="reference">{{ moveForm.lable }}</a>
                          </el-popover>
                        </el-form-item>
                        <el-form-item>
                          <el-button
                            type="primary"
                            @click="moveDomNow('moveDom' + node.id)"
                            >确定</el-button
                          >
                          <el-button @click="close()">取消</el-button>
                        </el-form-item>
                      </el-form>
                    </div>
                    <el-button
                      slot="reference"
                      type="text"
                      size="mini"
                      @click.stop="() => moveDom(node, data)"
                      >移动</el-button
                    >
                  </el-popover>
                  <el-popover
                    ref="popoverAdd"
                    placement="bottom"
                    title="添加选项"
                    width="500"
                    trigger="click"
                  >
                    <div>
                      <el-form
                        :model="ruleFormAdd"
                        :rules="rulesAdd"
                        :ref="'addDom' + node.id"
                        label-width="100px"
                        class="demo-ruleForm"
                      >
                        <el-form-item label="节点名" prop="node_name">
                          <el-input v-model="ruleFormAdd.node_name"></el-input>
                        </el-form-item>
                        <el-form-item label="节点类型" prop="node_type">
                          <el-select
                            v-model="ruleFormAdd.node_type"
                            placeholder="请选择"
                          >
                            <el-option
                              v-for="item in typeArr"
                              :key="item.value"
                              :label="item.display_value"
                              :value="item.t_id"
                            ></el-option>
                          </el-select>
                          <!-- <el-input v-model=""></el-input> -->
                        </el-form-item>
                        <el-form-item label="节点值">
                          <el-input v-model="ruleFormAdd.node_value"></el-input>
                        </el-form-item>
                        <el-form-item>
                          <el-button
                            type="primary"
                            @click="appendUrl('addDom' + node.id)"
                            >添加</el-button
                          >
                          <el-button @click="close()">取消</el-button>
                        </el-form-item>
                      </el-form>
                    </div>
                    <el-button
                      slot="reference"
                      type="text"
                      size="mini"
                      @click.stop="() => append(data)"
                      >添加</el-button
                    >
                  </el-popover>
                  <el-popover
                    ref="popoverUpdate"
                    trigger="click"
                    placement="right"
                    title="修改选项"
                    width="500"
                    content
                  >
                    <div>
                      <el-form
                        :model="ruleFormUpdate"
                        :rules="rulesUpdate"
                        :ref="'updateDom' + node.id"
                        label-width="100px"
                        class="demo-ruleForm"
                      >
                        <el-form-item label="节点名" prop="node_name">
                          <el-input
                            v-model="ruleFormUpdate.node_name"
                          ></el-input>
                        </el-form-item>
                        <el-form-item label="节点类型" prop="node_type">
                          <el-select
                            v-model="ruleFormUpdate.node_type"
                            placeholder="请选择"
                          >
                            <el-option
                              v-for="item in typeArr"
                              :key="item.value"
                              :label="item.display_value"
                              :value="item.t_id"
                            ></el-option>
                          </el-select>
                          <!-- <el-input v-model=""></el-input> -->
                        </el-form-item>
                        <el-form-item label="节点值">
                          <el-input
                            v-model="ruleFormUpdate.node_value"
                          ></el-input>
                        </el-form-item>
                        <el-form-item>
                          <el-button
                            type="primary"
                            @click="updateUrl('updateDom' + node.id)"
                            >修改</el-button
                          >
                          <el-button @click="close()">取消</el-button>
                        </el-form-item>
                      </el-form>
                    </div>
                    <el-button
                      slot="reference"
                      type="text"
                      size="mini"
                      @click.stop="() => update(node, data)"
                      >修改</el-button
                    >
                  </el-popover>
                  <el-button
                    type="text"
                    size="mini"
                    @click.stop="() => remove(node, data)"
                    >删除</el-button
                  >
                </div>
              </div>
            </el-tree>
          </el-card>
        </el-col>
        <el-col :span="2" class="u-icon-box">
          &nbsp;
          <!-- <i class="el-icon-sort"></i> -->
        </el-col>
        <el-col :span="11"></el-col>
      </el-row>
    </div>
    <!-- 弹出表 -->
    <!-- 对应表内数据查看 -->
    <el-dialog
      :title="ConfigDataTitle"
      :visible.sync="routerConfigShow"
      width="70%"
      :before-close="handleClose"
    >
      <div class="m-table-box">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="updateData({})"
          circle
        ></el-button>
        <el-table
          v-if="tableData && tableData.length > 0"
          :data="tableData"
          height="65vh"
          style="width: 100%"
          header-cell-class-name="thead"
        >
          <el-table-column
            v-for="(item, index) in colArr"
            :key="index"
            :prop="item"
            :label="item"
          ></el-table-column>
          <el-table-column label="操作" width="120px">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="updateData(scope.row)"
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="delectTableData(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="u-null" v-else>该表尚未完善</div>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </el-dialog>

    <!-- 修改删除 -->
    <el-dialog
      title="添加/编辑"
      :visible.sync="addupdateFormShow"
      width="40%"
      :before-close="handleClose_2"
    >
      <div>
        <el-form
          class="m-form-box"
          :label-position="'right'"
          label-width="120px"
          :model="form_data"
        >
          <div v-for="(value, key, index) in form_data.form_input" :key="index">
            <el-form-item :label="key" v-if="hiddenId != isHidden[key]">
              <el-select
                v-if="setArr(key) && !setArr(key)[0].parent"
                v-model="form_data.form_input[key]"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in setArr(key)"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <div v-else-if="setArr(key) && setArr(key)[0].parent">
                <el-popover placement="right" width="400" trigger="click">
                  <el-tree
                    :data="setArr(key)"
                    @node-click="handleNodeClick2($event, key)"
                  ></el-tree>
                  <span slot="reference" class="u-tree-box">
                    <span v-if="form_data.form_input[key]"
                      >Id - {{ form_data.form_input[key] }}</span
                    >
                    <a>{{ treeVal[key] || '未选择' }}</a>
                  </span>
                </el-popover>
              </div>
              <el-input v-else v-model="form_data.form_input[key]"></el-input>
            </el-form-item>
          </div>

          <el-form-item>
            <el-button type="primary" @click="insertUpdateTable"
              >保存</el-button
            >
            <el-button @click="clearForm">清空</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  manageTree,
  tableInsert,
  tableUpdate,
  findEnumTreeByMultiFieldIds,
  queyEnumByTableName,
  queryPageList,
  tableDeleted,
  listFieldsAndProertiesByTableName,
  getFiledsDataByTableName
  // queryList
} from '@/api/api.js'
import { getCourseById } from '@/api/course.js'
import { format } from '@/utils/index.js'
export default {
  data () {
    return {
      selectArr: {},
      treeVal: {},
      addupdateFormShow: false,
      form_data: {
        // table_name: 'core_table_and_member',
        table_name: 'core_table',
        table_id: '1',
        form_input: { table_id: '', table_name: '', description: '' }
      },
      hiddenId: '',
      isHidden: {},
      colArr: [],
      clickData: {},
      pageIndex: 1,
      totalPage: 0,
      pageSize: 10,
      tableData: [],
      ConfigDataTitle: '',
      node_in: {},
      data_in: {},
      rulesMoveForm: {
        // parent: [{ required: true, message: '请选择新节点', trigger: 'blur' }]
      },
      moveForm: {
        lable: '请选择',
        parent: '',
        moveId: ''
      },
      boxHeight: '0px',
      requestArr: [],
      routerConfigVale: 'insert',
      routerConfigData: {},
      routerConfigShow: false,
      typeArr: [],
      aaa: '',
      addDataSet: {},
      updateDataSet: {},
      filterText: '',
      treeData: [],
      treeDataCopy: [],
      ruleFormAdd: {
        node_name: '',
        node_type: '',
        node_value: ''
      },
      rulesAdd: {
        node_name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        node_type: [
          { required: true, message: '请选择节点类型', trigger: 'change' }
        ]
      },
      ruleFormUpdate: {
        node_name: '',
        node_type: '',
        node_value: ''
      },
      rulesUpdate: {
        node_name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        node_type: [
          { required: true, message: '请选择节点类型', trigger: 'change' }
        ]
      }
    }
  },
  created () {
    this.getHidden()
    this.getTreeUrl()
    this.getSelectDAta()
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    // 插入修改表格数据接口
    async insertUpdateTable (e) {
      if (!this.tableData) {
        // 插入
        let res = await tableInsert([
          {
            table_name: this.form_data.table_name,
            list: [this.form_data.form_input]
          }
        ])
        if (res[1].code === 0) {
          this.$message({
            message: '插入数据成功',
            type: 'success'
          })
          this.handleClose_2()
          // this.routerConfig(this.clickData)
          this.clearForm()
          this.treeVal = {}
        } else {
          this.$message(res[1].msg)
        }
      } else {
        // 修改
        let where = [{}]
        where[0][this.colArr[0]] = this.form_data.form_input[this.colArr[0]]

        let res = await tableUpdate([
          {
            table_name: this.form_data.table_name,
            update: [this.form_data.form_input],
            where: where
          }
        ])
        if (res[1].code === 0) {
          this.$message({
            message: '修改数据成功',
            type: 'success'
          })
          this.clearForm()
          this.handleClose_2()
          // this.routerConfig(this.clickData)
          this.treeVal = {}
        } else {
          this.$message(res[1].msg)
        }
      }
    },
    // 重置form
    clearForm () {
      for (let item in this.form_data.form_input) {
        this.form_data.form_input[item] = ''
      }
    },
    // 获取下拉菜单数据
    async getSelectDataIntable () {
      let res = await getFiledsDataByTableName({
        tableName: this.form_data.table_name,
        fields: []
      })
      if (res[0]) {
        return
      }
      let arr = res[1].data
      arr.map(item => {
        if (item.sourceType === 'sql_query') {
          this.selectArr[item.fieldName] = {
            data: item.sourceData,
            type: 'sql_query'
          }
        } else if (item.sourceType === 'nice_enum') {
          this.selectArr[item.fieldName] = {
            data: item.sourceData,
            type: 'nice_enum'
          }
        }
      })

      // Object.keys(this.selectArr).forEach(item => {
      //   for (let i = 0; i < arr.length; i++) {
      //     if (arr[i].fieldName === item) {
      //       this.selectArr[item] = arr[i].child
      //     }
      //   }
      // })
      this.selectArr = JSON.parse(
        JSON.stringify(this.selectArr)
          .split('display_value')
          .join('label')
          .split('child')
          .join('children')
          .split('t_id')
          .join('value')
      )
      console.log(this.selectArr, 11111)
    },
    handleNodeClick2 (data, key) {
      this.treeVal[key] = data.label
      this.form_data.form_input[key] = data.value
    },
    setArr (e) {
      if (this.selectArr[e]) {
        let arr = this.selectArr[e].data
        if (arr.constructor && arr.constructor === Array) {
          return arr
        } else {
          return [arr]
        }
      } else {
        return false
      }
    },
    updateData (e) {
      for (let item in this.form_data.form_input) {
        this.form_data.form_input[item] = e[item]
      }
      this.treeVal = {}
      this.addupdateFormShow = true
    },
    // 获取需要隐藏的表单
    async getHidden () {
      let res = await queryPageList({
        table_name: 'core_property_value',
        currPage: 1,
        pageSize: 9999
        // property_id: 1
      })
      if (res[0]) {
        return
      }

      res[1].page.list.map(item => {
        if (item.property_value === 'hidden_input') {
          this.hiddenId = item.property_value_id
        }
      })
    },
    // 删除某表格内数据
    async delectTableData (e) {
      let where = {}
      where[this.colArr[0]] = JSON.stringify([e[this.colArr[0]]])
      let res = await tableDeleted([
        {
          table_name: this.clickData.node_value,
          where: where
        }
      ])
      if (res[0]) {
        return
      }
      this.routerConfig(this.clickData)
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.routerConfig(this.clickData)
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.routerConfig(this.clickData)
    },
    handleClose_2 () {
      this.addupdateFormShow = false
    },
    handleClose () {
      this.routerConfigShow = false
    },
    // 测试接口
    testRequest () {
      let type
      // routerConfigData.request_type
      this.requestArr.map(item => {
        if (this.routerConfigData.request_type === item.t_id) {
          type = item.display_value.toLowerCase()
        }
      })
      let data = JSON.parse(this.routerConfigData.request)
      this.$http({
        url: this.$http.adornUrl(this.routerConfigData.url),
        method: type,
        data: this.$http.adornData(data)
      }).then(({ data }) => {
        this.$message({
          message: '测试结果已返回',
          type: 'success'
        })
        this.routerConfigData.testResult = format(JSON.stringify(data), false)
      })
    },
    // 移动目录交互请求
    async moveDomNow (e) {
      if (this.moveForm.parent) {
        // 修改接口
        let res = await tableUpdate([
          {
            table_name: 'project_config_tree',
            update: [
              {
                parent: this.moveForm.parent
              }
            ],
            where: [
              {
                node_id: this.moveForm.moveId
              }
            ]
          }
        ])
        if (res[0]) {
          return
        }
        let dataCopy = JSON.parse(JSON.stringify(this.data_in))
        const parent = this.node_in.parent
        const children = parent.data.children || parent.data
        const index = children.findIndex(
          d => d.node_id === this.data_in.node_id
        )
        children.splice(index, 1)
        this.addDataSet.children.push(dataCopy)
        this.close()
      } else {
        this.$message('您未选择节点')
      }
    },
    // 移动目录选中节点
    handleNodeClick (e) {
      this.moveForm.lable = e.label
      this.moveForm.parent = e.node_id
      this.addDataSet = e
    },
    // 配置移动数据
    moveDom (node, data) {
      this.moveForm.lable = '请选择'
      this.moveForm.parent = ''
      this.moveForm.moveId = data.node_id
      this.node_in = node
      this.data_in = data
      this.treeDataCopy = this.treeData
    },
    async routerConfigUpdate (e) {
      // 插入
      if (e === 'insert') {
        let res = await tableInsert([
          {
            table_name: 'nice_router',
            list: [
              {
                node_id: this.routerConfigData.node_id,
                url: this.routerConfigData.url,
                request_type: this.routerConfigData.request_type,
                description: this.routerConfigData.description,
                pre_processors: this.routerConfigData.pre_processors,
                data_processors: this.routerConfigData.data_processors,
                post_processors: this.routerConfigData.post_processors,
                principal: this.routerConfigData.principal,
                request: this.routerConfigData.request,
                response: this.routerConfigData.response
              }
            ]
          }
        ])
        if (res[0]) {
          return
        }
        this.$message({
          message: '提交成功',
          type: 'success'
        })
      } else {
        // 修改
        let res = await tableUpdate([
          {
            table_name: 'nice_router',
            update: [
              {
                url: this.routerConfigData.url,
                request_type: this.routerConfigData.request_type,
                description: this.routerConfigData.description,
                pre_processors: this.routerConfigData.pre_processors,
                data_processors: this.routerConfigData.data_processors,
                post_processors: this.routerConfigData.post_processors,
                principal: this.routerConfigData.principal,
                request: this.routerConfigData.request,
                response: this.routerConfigData.response
              }
            ],
            where: [
              {
                node_id: this.routerConfigData.node_id
              }
            ]
          }
        ])
        if (res[0]) {
          return
        }
      }
      this.$message({
        message: '已更新内容',
        type: 'success'
      })
      // this.routerConfigShow = false
    },
    async routerConfig (e) {
      console.log(e, 'sssss')
      this.clickData = e
      let typeValue
      this.form_data.table_name = e.node_value
      for (let i = 0; i < this.typeArr.length; i++) {
        if (e.node_type === this.typeArr[i].t_id) {
          typeValue = this.typeArr[i].display_value
        }
      }
      if (typeValue === '节点详情表') {
        this.getSelectDataIntable()

        // 打开表格
        let res = await getCourseById({
          table_name: e.node_value,
          node_id: e.node_id
        })
        if (res[0]) {
          return
        }
        console.log(res[1])
        let res2 = await listFieldsAndProertiesByTableName({
          tableName: e.node_value
        })
        if (res[0]) {
          return
        }
        let obj = {}
        this.colArr = []
        this.isHidden = {}
        res2[1].data.map(item => {
          this.colArr.push(item.fieldName)
          this.isHidden[item.fieldName] = ''
          if (item.fieldPropertys && item.fieldPropertys.length > 0) {
            item.fieldPropertys.map(item2 => {
              if (this.hiddenId === item2.propertyValueId) {
                this.isHidden[item.fieldName] = this.hiddenId
              }
            })
          }
        })
        console.log(this.isHidden, 'this.isHiddenthis.isHidden')
        // for (let item in res2[1].data) {
        //   this.colArr.push(item.fieldName)
        // }
        for (let i = 0; i < this.colArr.length; i++) {
          obj[this.colArr[i]] = ''
          // if (e === this.form_obj[i].table_name) {
          //   this.form_data = this.form_obj[i]
          // }
        }
        this.form_data.form_input = JSON.parse(JSON.stringify(obj))
        this.tableData = res[1].data
        // this.totalPage = res[1].page.totalCount
        console.log(this.tableData)
        if (this.tableData) {
          for (let i in this.form_data.form_input) {
            this.form_data.form_input[i] = this.tableData[i]
          }
        }
        this.form_data.form_input.node_id = e.node_id
        this.ConfigDataTitle = e.label
        this.addupdateFormShow = true
      } else {
        this.routerConfigShow = false

        this.$message('非节点详情表')
      }
    },
    // 获取下拉菜单数据
    async getSelectDAta () {
      let res = await findEnumTreeByMultiFieldIds({ param: ['100255'] })
      if (res[0]) {
        return
      }
      this.typeArr = res[1].data[0].child
      let res2 = await queyEnumByTableName({ tableName: 'nice_router' })
      if (res2[0]) {
        return
      }
      this.requestArr = res2[1].data[0].child
      console.log(this.requestArr, 'this.requestArr')
    },
    close () {
      this.$refs.treeBox.click()
    },

    async getTreeUrl () {
      let res = await manageTree({
        tableName: 'project_config_tree',
        fieldName: 'node_id',
        id: '1'
      })
      if (res[0]) {
        return
      }
      // console.log(res[1], '11111')
      this.treeData = JSON.parse(
        JSON.stringify([res[1].data])
          .split('child')
          .join('children')
      )
      this.treeData = JSON.parse(
        JSON.stringify(this.treeData)
          .split('node_name')
          .join('label')
      )
      this.treeDataCopy = this.treeData
      // console.log(this.data, '2222')
    },
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 添加节点
    append (data) {
      this.routerConfigShow = false
      this.addDataSet = data
    },
    appendUrl (formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const newChild = {
            label: this.ruleFormAdd.node_name,
            node_type: this.ruleFormAdd.node_type,
            node_value: this.ruleFormAdd.node_value,
            children: []
          }
          // 添加接口
          let res = await tableInsert([
            {
              table_name: 'project_config_tree',
              list: [
                {
                  node_name: this.ruleFormAdd.node_name,
                  node_type: this.ruleFormAdd.node_type,
                  node_value: this.ruleFormAdd.node_value,
                  parent: this.addDataSet.node_id
                }
              ]
            }
          ])
          if (res[0]) {
            return
          }
          //
          newChild.node_id = res[1].data[0].list[0].id
          if (!this.addDataSet.children) {
            this.$set(this.addDataSet, 'children', [])
          }
          this.addDataSet.children.push(newChild)
          this.close()
          this.ruleFormAdd = {
            node_name: '',
            node_type: '',
            node_value: ''
          }
          this.treeDataCopy = this.treeData
        } else {
          // console.log()
          this.$message('输入的内容检测不合理')
          return false
        }
      })
    },
    // 修改节点
    update (node, data) {
      this.routerConfigShow = false
      this.updateDataSet = data
      this.ruleFormUpdate = {
        node_name: data.label,
        node_type: data.node_type,
        node_value: data.node_value
      }
    },
    // 修改请求
    updateUrl (formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          // 修改接口
          let res = await tableUpdate([
            {
              table_name: 'project_config_tree',
              update: [
                {
                  node_name: this.ruleFormUpdate.node_name,
                  node_type: this.ruleFormUpdate.node_type,
                  node_value: this.ruleFormUpdate.node_value
                }
              ],
              where: [
                {
                  node_id: this.updateDataSet.node_id
                }
              ]
            }
          ])
          if (res[0]) {
            return
          }
          //
          this.updateDataSet.label = this.ruleFormUpdate.node_name
          this.updateDataSet.node_type = this.ruleFormUpdate.node_type
          this.updateDataSet.node_value = this.ruleFormUpdate.node_value
          // this.getTreeUrl()
          //
          this.close()
          this.ruleFormUpdate = {
            node_name: '',
            node_type: '',
            node_value: ''
          }
        } else {
          this.$message('输入的内容检测不合理')
          return false
        }
      })
    },
    // 选择
    handleCheckChange (data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
    },
    remove (node, data) {
      this.routerConfigShow = false
      this.$confirm('确认要删除？')
        .then(async _ => {
          let res = await tableUpdate([
            {
              table_name: 'project_config_tree',
              update: [
                {
                  enable: '1'
                }
              ],
              where: [
                {
                  node_id: data.node_id
                }
              ]
            }
          ])
          if (res[0]) {
            return
          }
          // this.getTreeUrl()
          const parent = node.parent
          const children = parent.data.children || parent.data
          const index = children.findIndex(d => d.node_id === data.node_id)
          children.splice(index, 1)
        })
        .catch(_ => {})
    }
  }
}
</script>
<style scoped>
.select_input {
  margin-bottom: 10px;
}
.u-add-parent {
  transform: scale(0.7);
}
.u-delect-all {
  margin-left: -10px;
  transform: scale(0.7);
}
.z-inline {
  line-height: 40px;
}
.custom-tree-node {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.u-icon-box {
  text-align: center;
}
.el-icon-sort {
  /* margin-top: 55px; */
  font-size: 30px;
  transform: rotate(90deg);
}
.box-card {
  /* height: 78vh; */
  /* overflow: auto; */
}
.z-align-right {
  text-align: right;
}
.u-test-interface {
  float: left;
}
.m-form-box {
  height: 500px;
  overflow: auto;
  padding-right: 50px;
}
</style>
